import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { registerMicroApps, start, initGlobalState } from 'qiankun'

// 初始化全局状态管理
const initialState = {
  user: {
    name: '全局用户',
    token: 'initial-token'
  },
  theme: 'light'
}

// 创建全局状态通信对象
const actions = initGlobalState(initialState)

// 主应用监听全局状态变化
actions.onGlobalStateChange((newState, oldState) => {
  console.log('主应用监听到状态变化:', newState, oldState)
})

// 主应用更新全局状态的方法
window.setMainAppState = (state) => {
  actions.setGlobalState(state)
}

// 创建主应用实例
const app = createApp(App)
app.use(router)
app.mount('#app')

// 注册微应用
registerMicroApps([
  {
    name: 'user-app', // 微应用名称，需唯一
    entry: '//localhost:8081', // 微应用入口地址
    container: '#micro-container', // 微应用挂载容器
    activeRule: '/user', // 激活路由规则
    props: {
      mainAppName: '主应用',
      // 传递全局状态通信方法
      actions
    }
  },
  {
    name: 'order-app',
    entry: '//localhost:8082',
    container: '#micro-container',
    activeRule: '/order',
    props: {
      mainAppName: '主应用',
      actions
    }
  }
], {
  // 全局生命周期钩子
  beforeLoad: (app) => console.log('全局 beforeLoad:', app.name),
  beforeMount: (app) => console.log('全局 beforeMount:', app.name),
  afterUnmount: (app) => console.log('全局 afterUnmount:', app.name)
})

// 启动qiankun
start({
  sandbox: {
    strictStyleIsolation: true, // 严格样式隔离
    experimentalStyleIsolation: false
  },
  prefetch: 'all', // 预加载所有微应用
  // 自定义获取微应用入口的方法
  getPublicPath: (app) => {
    return app.name === 'user-app' ? '/user/' : '/order/'
  }
})
